<template>
    <div class="doc-content">
        <div class="back" @click="$router.go(-1)">返回 </div>
        <div class="doc-directory">
            <div v-for="item in docDirectoryList" class="docLi" :key="item.id" @click="directoryClick(item)" >
              
            {{item.directoryTitle }}
        </div>
        </div>
        <div class="image-box" ref="imageList">
            <div v-for="item in imgList" :key="item.id" :id="'li' + item.imgNumber" class="imgLi">
                <img :src="item.pageUrl" alt="">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            imgList: [],
            docDirectoryList: [],
        }
    },
    mounted() {
        this.pdfClick()
    },
    methods: {
   
        pdfClick() {
            this.$http.post("/doc/selectDocDirectory", { docId: this.$route.query.id })
                .then((res) => {
                    this.docDirectoryList = res.data.data
                });
            this.$http.post("/doc/selectDocPageContentByDocId", { docId: this.$route.query.id })
                .then((res) => {
                    this.imgList = res.data.data;
                        setTimeout(() => {
                        let id = 'li' + this.$route.query.imgNumber
                        console.log(id);
                        let dom = document.getElementById(id)
                        dom.scrollIntoView({ behavior: "smooth" })
                        }, 50);
                       

                });

        },
        directoryClick(item) {
            console.log(document.getElementById('li' + item.imgNumber).offsetTop);
            console.log(this.$refs.imageList);
            let dom = document.getElementById('li' + item.imgNumber).scrollIntoView({ behavior: "smooth", })

        },

    }

}
</script>

<style>
.back {
    cursor: pointer;
    margin: 20px 0;
}

.doc-content {
    margin-top: 20px;
    width: 90%;
    margin: 0 auto;
}

.doc-directory {
    width: 30%;
    cursor: pointer;
    position: fixed;
}

.image-box {
    margin-left: 30%;
    width: 68%;
    height: auto;
}

.docLi {
    width: 100%;
    padding: 10px 0;
}

.imgLi img {
    width: 100%;
    /* height: 1000px; */
}
</style>